import { useState, useEffect } from 'react'
import axios from 'axios'
import type { Channel } from '../types/channel'

axios.defaults.baseURL = 'https://huangjiangjun.top:3002/api/'

export default function UseStateDemo () {
  // 普通的值类型，它会自动推荐出来
  const [count, setCount] = useState(100)
  //   const [count, setCount] = useState<number>(100)
  const [channels, setChannels] = useState<Channel[]>([])

  const getChannels = async () => {
    const res = await axios.get('channel/list')
    setChannels(res.data.data)
  }

  useEffect(() => {
    getChannels()
  }, [])

  return (
    <div>
      UseStateDemo
      <p>count is {count}</p>
      <p>
        <button onClick={() => setCount(count + 1)}>+1</button>
      </p>
      <ul>
        {channels.map(item => {
          return <li key={item.id}>{item.name}</li>
        })}
      </ul>
    </div>
  )
}
